<template>
  <div id="news-list">
    <!-- <van-button @click="readAll">123</van-button> -->
    <div class="nav-container">
      <!-- <van-tabs sticky animated swipeable color="#2E79FF" @click="setSrollTop" v-model="activeTab">
        <van-tab v-for="(item, index) in tabs" :key="`${index}tab页`" :title="item.name"> -->
          <div class="tab-panel" >
            <van-pull-refresh ref="newsList" v-model="refreshLoading" @refresh="getDataList(true, false)">
              <img
                slot="loading"
                class="loading-gif-refresh"
                src="../../assets/loading.gif"
              >
              <template v-if="newsFinished && newsList.length == 0">
                <div class="no-data-img">
                  <img src="../../assets/meeting/no_meeting.png">
                  <p>暂无内容</p>
                </div>
              </template>
              <van-list
                v-show="newsList.length > 0"
                v-model="isLoading"
                :finished="newsFinished"
                finished-text="没有更多数据了"
                @load="getDataList(false, false)">

                <div class="reference-card" v-for="(itemInner, indexInner) in newsList" :key="`${itemInner.id}列表`" @click.stop="goToDetail(itemInner, 'detailInfo')">
                  <div class='content' :class="{'full-name': !itemInner.pic}">
                    <h4 class="title van-multi-ellipsis--l2">
                      <span class="red-point" v-if="itemInner.is_status == 2"></span>
                      {{ itemInner.subject }}
                    </h4>
                    <p  class='sub-title'>
                      <span class="user-name van-ellipsis">{{ itemInner.uid }}</span>
                      <span v-if="itemInner.date"> {{ $common.convertDate(itemInner.date, 'Y-M-D') }}<span class="read-num">{{ itemInner.read_num }}阅</span></span>
                    </p>
                  </div>
                  <van-image v-if="itemInner.pic" class="image" :src="$common.returnImg(itemInner.pic)" width="115" height="80"></van-image>
                </div>
              </van-list>
            </van-pull-refresh>
          </div>
        <!-- </van-tab>
      </van-tabs> -->
    </div>
  </div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        newsList: [],
        newsPage: 1,
        newsFinished: false,

        refreshLoading: false,
        isLoading: false,
      }
    },
    activated() {
      window.scrollTo(0, this.$store.state.newsScroll) // 根据记录值进行滚动
      this.$store.commit('changeStatus', { key: 'newsScroll', value: 0 })
      if(this.$route.query.type == 1) {
        this.$bridge.callHandler('navTitle', {title: '公司新闻'})
      } else {
        this.$bridge.callHandler('navBackground', {title: '党建工作'})
      }
      setTimeout(_ => {
        this.$bridge.callHandler('navRight', {title: '一键已读'})
        this.$bridge.registerHandler('navRightClicked', () => {
          this.$bridge.callHandler('navKeepView')
          this.$dialog.confirm({
            title: '提示',
            message: '确认将所有内容标记为已读吗？'
          }).then(() => {
            this.$bridge.callHandler('cancelNavKeepView')
            this.readAll()
          }).catch(() => { 
            this.$bridge.callHandler('cancelNavKeepView')
          });
        })
        this.$bridge.registerHandler('navBackClicked', (data, callback) => {
          callback('h5done')
        })
      }, 200)
    },
    mounted() {
      this.getDataList(true, true)
    },
    methods: {
      onRefresh() {
        setTimeout(() => {
          this.$toast('刷新成功');
        }, 500);
      },
      readAll() {
        let self = this
        let config = {
          url: `${this.$common.basePath}aatp5/public/index.php/message/Notices/aKeyRead`,
          data: {
            type: this.$route.query.type,
            uid: this.$store.state.userId,
          },
          method: 'POST'
        }
        self.$axios(config).then(res => {
          self.$toast.success('已全部标记为已读!')
          self.getDataList(true, true)
        }).catch(err => {

        })
      },
      /**
       * 获取列表数据
       * @return {[type]} [description]
       */
      getDataList(init, showToast) {
        let self = this
        
        if(init) { //初始化查询
          self.newsPage = 1
          self.newsFinished = false
        }

        let config = {
          url: `${this.$common.basePath}aatp5/public/index.php/message/Notices/workList`,
          data: {
            type: this.$route.query.type,
            pageIndex: self.newsPage++,
            news_type: this.$route.query.type == 1 ? 1 : 5,
            uid: this.$store.state.userId,
          },
          method: 'POST'
        }
        if(showToast) {
          self.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
        }
        
        if(!self.newsFinished || init) {
          self.$axios(config).then(res => {
            self.isLoading = false
            self.newsList = init ? res.data.data : self.newsList.concat(res.data.data)
            if(self.newsList.length >= res.data.count) {
              self.newsFinished = true
            }
            self.refreshLoading = false;
            self.$toast.clear()
          }).catch(err => {
            self.$toast.clear()
          })
        }
      },
      /**
       * 查看详情
       * @param  {[type]} item [description]
       * @param  {[type]} type [description]
       * @return {[type]}      [description]
       */
      goToDetail(item) {
        this.$store.commit('changeStatus', { key: 'newsScroll', value: window.scrollY })
        if(item.is_status == 2) {
          item.read_num++
        }
        item.is_status = 1
        //记录滚动高度
        this.$router.push({name: 'newsDetail', query: { id: item.id, type: this.$route.query.type, from: 'default' }})
      }
    }
  }
</script>

<style lang="less" scoped>
  .padding-button {
    height: 30px!important;
    padding: 5px 22px 5px 22px!important;
    font-size: 17px!important;
    line-height: 17px!important;
  }
  #news-list {
    .red-point {
      &:after {
        display: inline-block;
        margin-bottom: 3px;
        height: 8px;
        width: 8px;
        content: ' ';
        background: #F54B03;
        border-radius: 4px;
      }
    }
    .tab-panel  {
      -webkit-overflow-scrolling: touch;
      overflow-y: hidden;
      .van-pull-refresh__track {
        min-height: calc(100vh);
      }
      // .van-card {
      //   padding: 15px;
      //   background: #fff;
      //   border-width: 75%;
      //   border-bottom: 1px solid #f5f5f5;
      //   margin-top: 0!important;
      //   .van-card__thumb {
      //     width: 115px;
      //     height: 80px;
      //     margin-right: 15px;
      //     & .van-image img {
      //       width: 115px!important;
      //       border-radius: 2px;
      //     }
      //   }
      //   .van-card__content {
      //     min-height: 80px;
      //     display: flex;
      //     flex-direction: column;
      //     justify-content: space-between;
      //   }
      // }
      // .card-title {
      //   font-size: 17px;
      //   margin: 0;
      // }
      // .card-desc {
      //   display: flex;
      //   justify-content: space-between;
      //   align-items: center;
      //   margin: 10px 0 0 0;
      //   font-size: 14px;
      //   color: #999;
      //   .name-time {
      //     display: flex;
      //     align-items: center;
      //   }
      //   .user-name {
      //     display: inline-block;
      //     max-width: 80px!important;
      //     margin-right: 10px;
      //   }
      // }
      // .card-footer {
      //   margin-top: 12px;
      // }
    }
  }
  .no-data-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30% 0 30% 0;
    background-color: #fff;

    img {
      width: 180px;
      height: 106px;
      text-align: center;
    }

    p{
      font-size: 17px;
      color: #333333
    }
  }
  .reference-card {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
    padding: 15px;
    &:last-child {
      border-bottom: none;
    }
    .content {
      height: 80px;
      position: relative;
      width: calc( 100% - 125px );
      font-size: 17px;
      &.full-name {
        width: 100%;
      }
      .title {
        margin-top: 0;
        height: 48px;
        margin-bottom: 0px;
        width: 100%;
        font-size: 17px;
        font-weight: normal;
        color: #333;
      }
      .sub-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: calc(100%);
        font-size: 14px;
        color: #999;
        .user-name {
          display: inline-block;
        }
        .read-num {
          margin-left: 15px;
        }
      }
    }
    .image {
      margin-left: 15px;
      width: 115px!important;
      border-radius: 2px!important;
       img  {
        width: 115px!important;
        border-radius: 2px;
      }
    }
  }
</style>